<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="./css/animation.css" rel="stylesheet">
    <link href="./css/page7.css" rel="stylesheet">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./js/html2canvas.min.js"></script>
    <script type="text/javascript" src="./js/screenPlan.js"></script>

    <style>

    </style>
</head>
<body>
    <div class="page7">
        <img class="click-me" src="img7/click.png">
        <img id="canvasImgBox"/>
        <div id="imgBox" class="img-box">
            <div id="TaName"></div>
            <img id="place" src="img7/bg1.png">
            <div class="qr-box">
                <img class="qr-code" src="img7/qrcode.png">
                <p>即刻生成专属告白海报</p>
            </div>
            <p class="des"></p>
            <p class="date">8月17日 全城 SAY LOVE</p>
        </div>
        <div id="saveBox" class="save-box">
            <img src="img7/save.png">
        </div>

    </div>
</body>
<script>
    $(function () {
      var name = localStorage.customerName || "黄彬彬";
      var place = localStorage.place || 1;
      if (place == 1) {
        $("#TaName").addClass("love-name1").text("- " + decodeURIComponent(name));
        $(".img-box .des").text("TA 在龙港新城等你");
        $("#place").attr("src", "img7/bg1.png");
      } else if (place == 2) {
        $("#TaName").addClass("love-name2").text("- " + decodeURIComponent(name));
        $(".img-box .des").text("TA 在月湖公园等你");
        $("#place").attr("src", "img7/bg2.png");
      } else {
        $("#TaName").addClass("love-name3").text("- " + decodeURIComponent(name));
        $(".img-box .des").text("TA 在恒大逸合城等你");
        $("#place").attr("src", "img7/bg3.png");
      }
      setTimeout(function () {
        html2canvas(document.getElementById("imgBox")).then(function(canvas) {
          document.body.appendChild(canvas);
          var img = document.getElementById("canvasImgBox");
          var tempSrc = canvas.toDataURL("image/png");
          img.src = tempSrc;
          var imgBoxHeight = $("#imgBox").height();
          $("#canvasImgBox").height(imgBoxHeight).show();
          $("#imgBox").hide();
        });
      }, 2000);
    })
</script>

</html>